<template>
  <div class="home_page">
    <div class="search">
      <SearchHouse></SearchHouse>
    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :clickable="true" :border="false">
      <van-grid-item
        to="/room"
        icon=""
        text="整租"
      />
      <van-grid-item
        to="/room"
        icon=""
        text="合租"
      />
      <van-grid-item
        to="maphouse"
        icon=""
        text="地图找房"
      />
      <van-grid-item
        to="PushHouse"
        icon=""
        text="去出租"
      />
    </van-grid>
    <div>
      <van-grid :clickable="true" direction="horizontal" :column-num="2">
        <van-grid-item v-for="(item, index) in rentGroup" :key="index" icon="photo-o" :text="item" />
      </van-grid>
    </div>
  </div>
</template>

<script>

import { getSwiper } from '@/api/article'
import SearchHouse from '@/components/SearchHouse.vue'
export default {
  data () {
    return {
      images: [],
      rentGroup: ['家住回龙观 归属的感觉', '宜居四五环 大都市生活', '喧嚣三里屯 繁华的背后', '比邻十号线 地铁心连心']

    }
  },
  components: {
    SearchHouse
  },
  async created () {
    const { body } = await getSwiper()
    body.forEach((item) => {
      this.images.push(`http://liufusong.top:8080${item.imgSrc}`)
    })
  }
}
</script>

<style lang="less" scoped>
.home_page {
  position: relative;
  .search {
    position: absolute;
    transform: translateX(-50%);
    left: 49%;
    top: 20px;
    width: 80%;
    z-index: 1;
  }
}

/deep/ .van-swipe {
  height: 200px;
}

/deep/ .van-swipe img {
  width: 100%;
  height: 100%;
}

/deep/ .van-icon-location-o {
  font-weight: 700;
  font-size: 22px;
}

/deep/ .van-icon__image {
  height: 50px;
  width: 50px;
}

/deep/ .van-grid-item__content {
  padding: 20px 0px;
}
</style>
